<%--
  Created by IntelliJ IDEA.
  User: 刘洪兆0720
  Date: 2022/4/29
  Time: 9:26
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>考前操作</title>
    <link href="${path}/static/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
          media="screen">
</head>
<style>
    .tip {
        line-height: 50px;
        padding-left: 25px;
        color: white;
        margin-top: 8px;
    }

    #upexam2 {
        font-size: 12px;
        color: #e7e1dc
    }
</style>
<body onload="init()">
<jsp:include page="teacher_head.jsp"></jsp:include>

<!-- 教师添加的模态框 -->
<div class="modal fade" id="teaAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加学生</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                            <input type="text" name="stu_id" class="form-control" id="teaNumber_add_input"
                                   placeholder="学号">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="stu_name" class="form-control" id="teaName_add_input"
                                   placeholder="真实姓名">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所在班级</label>
                        <div class="col-sm-10">
                            <input type="text" name="stu_class" class="form-control" id="teaPassword_add_input"
                                   placeholder="所在班级">
                            <span class="help-block"></span>

                            <input type="hidden" name="stu_exam" value="${exam.e_name}">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="tea_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 批量导入教师数据模态框 -->
<div class="modal fade" id="importTeaData" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">批量导入</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" enctype="multipart/form-data" id="uploadForm">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">文件名</label>
                        <div class="col-sm-10">
                            <input type="file" name="file" class="form-control" id="file" placeholder="文件名">
                            <span class="help-block"></span>
                            <input type="hidden" name="stu_exam" value="${exam.e_name}">
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="tea_import_btn">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12" style="padding-left: 5px; padding-right: 5px;">
            <div class="alert navbar-inverse "
                 style="background-color: #e8e3e3; height: 200px; margin-top: 20px;">
                <strong style="margin-left: 20px; font-size: 18px">编辑考试信息</strong>
                <form class="form-inline" role="form" action="${path}/editExam"
                      style="margin-left: 20px; margin-top: 5px;" method="post">
                    <div class="form-group" style="display: inline-block">
                        <input type="text" style="display: none;" value="${exam.e_name }" name="e_oldname"/>
                        <input type="text" class="form-control" style="width: 250px" value="${exam.e_name}"
                               placeholder="考试名称*" name="e_name">
                    </div>

                    <div class="form-group" style="display: inline-block;position: relative;left: 10px;">
                        <div class="input-group date form_datetime" data-link-field="dtp_input2">
                            <input type="text" class="layui-input" id="datepicker" name="e_starttime"
                                   placeholder="考试时间*"
                                   value='${exam.e_starttime }' style="width: 170px; background-color: #fff;">
                        </div>
                    </div>
                    <br/>
                    <div class="checkbox"
                         style="display: inline-block; margin-left: 10px;align-content: center;margin-top: 10px;">
                        <label style="font-size: 15px"> <c:if test='${exam.e_autostart==1}'>
                            <input name="checkbox" type="checkbox" checked/>自动开始 </c:if> <c:if
                                test='${exam.e_autostart==0}'>
                            <input name="checkbox" type="checkbox"/>自动开始 </c:if>
                            <input type="text" style="display: none;" value="${exam.e_autostart }" name="e_autostart"/>
                        </label>
                    </div>
                    <br/>
                    <button class="btn btn-info" type="submit"
                            style="margin-top:20px; display: inline-block;position: relative;left: 5px; width: 100px; background-color: #04346c">
                        确定修改
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-bg-gray" style="padding-left: 5px; padding-right: 5px; height: 200px;background-color: #e8e3e3">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">上传试卷</div>
                    <div class="layui-card-body">
                        <div class="navbar navbar-inverse tip"
                             <c:if test="${exam.e_examination=='null' or exam.e_examination==''}">style="display:none; background-color: #e8e3e3;"</c:if>>
                            已经上传过试卷，再次上传后原试卷将不可访问
                            <a class="btn btn-default"
                               href="${path}/examDownload?e_name=${exam.e_name}&e_teacher=${teacher.t_username}"
                               style="margin-left: 10px"><span
                                    class="glyphicon glyphicon-eye-open"></span>下载查看</a>
                        </div>
                        <form class="form-inline" role="form" action="${path}/savePaper" onsubmit="return saveExam()"
                              enctype="multipart/form-data" method="post"
                              style="margin-left: 20px; margin-top: 8px;">
                            <input type="file" id="paper" name="paper"/>
                            <button id="btn" type="submit" style="margin-top: 5px" class="btn btn-info">上传</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">导入学生名单</div>
                    <div class="layui-card-body">
                        <form class="form-inline" role="form" style="margin-left: 20px; margin-top: 12px;">
                            <label style="font-size: 12px">目前设定参加此次考试的学生人数：</label> <span id="countnumber">人</span>
                            <br/>
                        </form>

                        <button class="btn btn-primary" id="tea_add_modal_btn" style="position: relative;left: 10px;">
                            单次添加
                        </button>
                        <button class="btn btn-primary" id="tea_adds_modal_btn" style="position: relative;left: 20px;">
                            批量导入
                        </button>
                        <a href="tea_before_stuInfo.jsp?e_name=${exam.e_name}&e_teacher=${teacher.t_username}"
                           class="btn btn-info" style="position: relative;left: 30px;">查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12" style="padding-left: 5px; padding-right: 5px;">
            <div class="alert navbar-inverse "
                 style="background-color: #e8e3e3; height: 140px; margin-top: 20px;">
                <strong style="margin-left: 20px; font-size: 18px">开启考试</strong>
                <form class="form-inline" role="form" style="margin-left: 20px; margin-top: 12px;" method="post"
                      onsubmit="return startExam()" action="${path}/examStart">
                    <span id="upexam2"
                          <c:if test="${exam.e_examination!='null'}">style="display:none;"</c:if>>尚未上传试卷</span>
                    <br/>
                    <button type="submit" style="margin-top: 12px" class="btn btn-warning">
                        <span class="glyphicon glyphicon-off"></span>开启
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
    function init() {
        $("input[name='checkbox']").click(function () {
            if ($("input[name='checkbox']:checked").val() == "on") {
                $("input[name='e_autostart']").val(1);
            } else {
                $("input[name='e_autostart']").val(0);
            }
        })
        $.post("${path}/getExamStudentNums", {
            'e_name': $("input[name='e_oldname']").val(),
            "e_teacher":${exam.e_teacher}
        }, function (data) {
            $("#countnumber").html(data.length);
        })
    }

    function startExam() {
        if ($("#upexam2").css("display") == "none") {
            return true;
        } else {
            alert("请先上传试卷");
            return false;
        }
    }

    function saveExcel() {
        if ($("input[name='file']").val().length == 0) {
            alert("请选择文件");
            return false;
        }
        return true;
    }

    function saveExam() {
        if ($("input[name='paper']").val().length == 0) {
            alert("请选择文件");
            return false;
        } else {
            $("#upexam").css("display", "block");
            $("#upexam2").css("display", "none");
            return true;
        }
    }

    //清空表单样式及内容
    function reset_form(ele) {
        $(ele)[0].reset();
        //清空表单样式
        $(ele).find("*").removeClass("has-error has-success");
        $(ele).find(".help-block").text("");
    }

    //点击新增按钮弹出模态框。
    $("#tea_add_modal_btn").click(function () {
        //清除表单数据（表单完整重置（表单的数据，表单的样式））
        reset_form("#teaAddModal form");
        //弹出模态框
        $("#teaAddModal").modal({
            backdrop: "static"
        });
    });

    //点击保存，保存教师。
    $("#tea_save_btn").click(function () {
        //1. 发送ajax请求保存教师
        //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
        $.ajax({
            url: "${path}/addStudent",
            type: "POST",
            data: $("#teaAddModal form").serialize(),
            success: function (result) {
                if (result.code == 100) {
                    //1、关闭模态框
                    $("#teaAddModal").modal('hide');
                    init();
                } else {
                    //显示失败信息
                    alert(result.extend.va_msg);
                }
            }
        });
    });

    //点击批量导入按钮弹出模态框。
    $("#tea_adds_modal_btn").click(function () {
        //清除表单数据（表单完整重置（表单的数据，表单的样式））
        reset_form("#importTeaData form");
        //弹出模态框
        $("#importTeaData").modal({
            backdrop: "static"
        });
    });

    //点击批量按钮，保存教师。
    $("#tea_import_btn").click(function () {
        saveExcel();
        //1、发送ajax请求保存教师
        //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
        $.ajax({
            url: "${path}/saveExcel",
            type: "POST",
            cache: false,
            data: new FormData($('#uploadForm')[0]),
            processData: false,
            contentType: false,
            success: function (data) {
                //教师保存成功；
                alert("批量导入成功！")
                //1、关闭模态框
                $("#importTeaData").modal('hide');
                init();
            },
            error: function (data) {
                alert("发生了未知错误啦！");
            }
        });
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //日期时间选择器
        laydate.render({
            elem: '#datepicker',
            type: 'datetime'
        });
    });
</script>
</body>
</html>